<template>
  <div id="Task">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <div class="container">
      <DataTable
        :showConfig="false"
        rowKey="id"
        :tableData="Data"
        :tableColumn="tableColumn"
        :pageConfig="pageConfig"
        childrenColumnName="childs"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'

@Component
export default class Task extends Vue {
  searchForm: any = {
    word: ''
    // date: [],
    // state: undefined
  }
  btns: any[] = [
    {
      label: '导入'
    },
    {
      label: '同步'
    }
  ]
  Data: any[] = [
    {
      id: 1,
      account: 111,
      children: [
        {
          id: 2,
          account: 111
        }
      ]
    }
  ]
  tableColumn: any = {
    name: {
      label: '部门名称',
      width: 600
    },
    id: {
      label: '部门编码'
    }
    // account1: {
    //   label: '部门负责人',
    //   width: 200
    // },
    // userName1: {
    //   label: '联系电话',
    //   minWidth: 120
    // },
    // roleName: {
    //   label: '创建时间',
    //   minWidth: 100
    // },
    // status: {
    //   label: '状态',
    //   minWidth: 170,
    //   type: 'switch',
    //   callback: this.changeStatus
    // }
  }
  selectedRowKeys: any = []
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  }
  get filterData () {
    return {
      // state: {
      //   label: '角色状态',
      //   type: 'select',
      //   template: {
      //     placeholder: '请选择状态',
      //     clearable: true,
      //     filterable: true,
      //     options: [
      //       {
      //         label: '全部',
      //         value: ''
      //       },
      //       {
      //         label: '启用',
      //         value: 1
      //       },
      //       {
      //         label: '禁用',
      //         value: 2
      //       }
      //     ]
      //   }
      // },
      // date: {
      //   label: '创建时间',
      //   type: 'daterange',
      //   template: {
      //     clearable: true
      //   }
      // },
      word: {
        label: '关键词',
        type: 'input',
        template: {
          placeholder: '请输入关键词',
          clearable: true
        }
      }
    }
  }
  init () {
    this.getList()
  }
  getList () {
    let { word } = this.searchForm
    let data = { word,page:this.pageConfig.current,size:this.pageConfig.pageSize }
    this.$api.organizationListFetch(data).then((res: any) => {
      this.Data = res.data.records
      this.pageConfig.total = res.data.total
    })
  }
  changePage (val: number) {
    this.pageConfig.current = val
    this.getList()
  }
  searchHandle () {
    this.pageConfig.current = 1
    this.getList()
  }
  changeStatus (row: any, index: number) {
    let { adminId, status } = row
    this.$api
      .adminStatusFetch({ adminId, status: !status })
      .then((res: any) => {
        this.$message.success(`${status ? '冻结' : '正常'}成功`)
        this.getList()
      })
  }
}
</script>

<style lang="scss" scoped>
/deep/ .ant-table-row-cell-break-word{
  display: flex;
}
</style>
